<script setup lang="ts">
import { computed, onMounted, Ref, ref, watch } from "vue";
import { bus } from "../../mitt/mitt";
import { ElNotification } from "element-plus";
import { getUserInfo } from "../../services/user";
import { getOnlineUserList } from "../../services/onlineChat";
import { UserFilled } from "@element-plus/icons-vue";
const props = defineProps<{}>();
const dialogVisible = ref(false);
//关闭弹窗
const handleClose = () => {
  dialogVisible.value = false;
};
//websocket 连接
const ws = ref();
watch(dialogVisible, (newVal, oldVal) => {
  if (newVal) {
    init();
    //获取在线用户
    getOnlineUserList()
      .then((result) => {
        let dataList = result.data;
        onlineUsers.value = dataList;
      })
      .catch((err) => {});
  } else {
    if (ws.value) {
      ws.value.close();
    }
  }
});

//获取在线用户
const onlineNum = ref(0);
const onlineUsers = ref();
const userInfo = ref({
  id: "",
  username: "",
  headPic: "",
});
const onlineUserList = () => {
  getOnlineUserList()
    .then((result) => {
      onlineUsers.value = result.data;
    })
    .catch((err) => {});
};
//初始化websocket
const init = () => {
  getUserInfo()
    .then((res) => {
      userInfo.value = res.data;
      //创建socket连接
      ws.value = new WebSocket(
        `ws://127.0.0.1:9090/websocket/${userInfo.value.id}/${userInfo.value.username}`
      );
      //关闭信息
      ws.value.onclose = () => {};
      //接收消息
      ws.value.onmessage = (msg) => {
        let msgData = JSON.parse(msg.data);
        onlineUserList();
        if (msgData.extras === "0") {
          ElNotification({
            title: "系统消息",
            message: msgData.content,
            type: "success",
          });
        } else {
          ElNotification({
            title: "系统消息",
            message: msgData.content,
            type: "error",
          });
        }
      };
    })
    .catch((err) => {});
};

//聊天
const chatUser = ref({
  id: "",
  username: "",
  headPic: "",
});

//点击用户头像聊天
const showmessdlog = (item) => {
  chatUser.value = item;
};

//聊天记录
const messnowList = ref([]);

const Wssendmess = () => {};
onMounted(() => {
  bus.on("openOnline", () => {
    dialogVisible.value = true;
  });
});
</script>

<template>
  <el-dialog
    :close-on-click-modal="false"
    v-model="dialogVisible"
    title="在线聊天"
    width="70%"
    :before-close="handleClose"
  >
    <div class="mess">
      <!--用户列表-->
      <div class="mess_user_list">
        <!--用户本人-->
        <div class="user">
          <el-avatar
            v-if="userInfo.headPic"
            :size="40"
            :src="userInfo.headPic"
            style="margin: 5px"
          ></el-avatar>
          <el-avatar
            :size="40"
            style="margin: 5px"
            v-else
            :icon="UserFilled"
          ></el-avatar>
          <span>{{
            userInfo.username.length <= 20
              ? userInfo.username
              : userInfo.username.slice(0, 20) + "..."
          }}</span>
        </div>
        <!--其他用户或群-->
        <div class="user_list">
          <div
            v-for="(item, index) in onlineUsers"
            :key="index"
            @click="showmessdlog(item)"
            class="user_list_item"
          >
            <el-avatar
              v-if="item.headPic"
              :size="40"
              :src="item.headPic"
              style="margin: 5px"
            ></el-avatar>
            <el-avatar
              :size="40"
              style="margin: 5px"
              v-else
              :icon="UserFilled"
            ></el-avatar>
            <div>
              <span>{{
                item.username.length <= 20
                  ? item.username
                  : item.username.slice(0, 20) + "..."
              }}</span>
            </div>
          </div>
        </div>
      </div>
      <!--有对话时，对话框-->
      <div class="mess_dialog">
        <!--对话框头部-->
        <div class="dlog_header">
          <el-avatar
            v-if="chatUser.headPic"
            :size="40"
            :src="chatUser.headPic"
            style="margin-left: 10px"
          ></el-avatar>
          <span v-if="chatUser.username" style="margin-left: 10px">{{
            chatUser.username
          }}</span>
        </div>
        <!--对话框内容-->
        <div class="dlog_content">
          <div
            v-for="(item, index) in messnowList"
            :key="index"
            class="dlog_content_item"
            style="margin-left: 5px"
          >
            <!--其他用户的消息展示-->
            <div v-if="item.send_id !== userId" class="content_other">
              <span style="font-size: 8px"
                >{{ item.send_name }} {{ item.send_date }}</span
              >
              <p style="margin: 0px; margin-top: 4px">{{ item.content }}</p>
            </div>
            <!--本用户的消息展示-->
            <div v-else class="content_me">
              <span style="font-size: 8px"
                >{{ item.send_date }} {{ item.send_name }}</span
              >
              <p style="margin: 0px; margin-top: 4px">{{ item.content }}</p>
            </div>
          </div>
        </div>
        <!--对话框底部-->
        <div class="dlog_footer">
          <el-input type="textarea" :rows="4" v-model="mess"></el-input>
          <el-button
            type="primary"
            @click="Wssendmess"
            style="float: right; margin-top: 5px"
            >发送</el-button
          >
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<style lang="less" scoped>
.mess {
  border-radius: 5px;
  background-clip: padding-box;
  box-shadow: 0 0 5px #9b9393;
  background-color: white;
  display: flex;
}
.mess_user_list {
  width: 18%;
  height: 100%;
  .user {
    height: 60px;
    /*垂直居中*/
    display: flex;
    align-items: center;
    border-right: 2px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
  }
  .user_list {
    height: 540px;
    overflow-y: scroll;
    background-color: #ffffff;
    .user_list_item {
      height: 60px;
      border-bottom: 1px solid #d3d3d3;
      display: flex;
      align-items: center;
    }
  }
}
.mess_dialog {
  width: 100%;
  .dlog_header {
    height: 60px;
    border-bottom: 1px solid #dfdfdf;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;
  }
  .dlog_content {
    height: 62%;
    border-bottom: 1px solid #dfdfdf;
    overflow-y: scroll;
  }
  .dlog_footer {
    width: 90%;
  }
}
.mess_dialog_false {
  width: 680px;
  height: 600px;
  text-align: center;
  line-height: 600px;
}

.content_other {
  width: 650px;
}
.content_me {
  width: 650px;
  text-align: right;
}
</style>
